<template>
  <div class="box">
    <Item />
  </div>
</template>

<script>
  import Item from "./components/Item.vue";

  export default {
    name: "App",
    components: {
      Item,
    },
    data() {
      return {};
    },
    /* 使用directives配置项局部注册自定义指令 */
    directives: {
      // 函数接受两个参数,一个是当前的DOM,一个是当前指令的详细(里边有一个value属性就是指令的值)
      red(el) {
        console.log(el);
        el.style.background = "red";
      },
      color(el, binding) {
        console.log(binding.value);
        el.style.background = "pink";
      },
      pink(el) {
        console.log(el);
        el.style.background = "pink";
      },
      blue(el, binding) {
        console.log(binding.value);
      },
    },
  };
</script>

<style>
  /* .box{
    background: lightblue;
  } */
</style>
